<template>
  <div class="admin-manage">
    <a-flex gap="middle" vertical>
      <!-- 标题和新增按钮区 -->
      <a-flex justify="space-between" :align="'center'" class="header-section">
        <div class="page-title">
          <span class="title-text">xx列表</span>
          <span class="title-desc">管理和操作相关数据</span>
        </div>
        <a-button type="primary" :icon="h(PlusOutlined)" class="action-button">新增xx</a-button>
      </a-flex>

      <!-- 搜索区 -->
      <a-form :layout="'inline'" class="search-form">
        <a-form-item label="xx名称">
          <a-input placeholder="请输入名称" allowClear />
        </a-form-item>
        <a-form-item label="xx类型">
          <a-select ref="select" style="min-width: 180px" placeholder="请选择类型" allowClear>
            <a-select-option value="jack">Jack</a-select-option>
            <a-select-option value="lucy">Lucy</a-select-option>
            <a-select-option value="disabled" disabled>Disabled</a-select-option>
            <a-select-option value="Yiminghe">yiminghe</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="创建时间">
          <a-range-picker />
        </a-form-item>
        <a-form-item class="action-item">
          <a-space>
            <a-button type="primary" :icon="h(SearchOutlined)" class="search-button">查询</a-button>
            <a-button :icon="h(ReloadOutlined)">重置</a-button>
          </a-space>
        </a-form-item>
      </a-form>

      <!-- 批量操作区 -->
      <a-flex justify="space-between" :align="'center'">
        <a-flex justify="space-between">
          <a-space>
            <a-button type="primary" :icon="h(VerticalAlignTopOutlined)" class="action-button"
              >批量上架</a-button
            >
            <a-button
              type="primary"
              class="publish-button action-button"
              :icon="h(VerticalAlignBottomOutlined)"
              >批量下架</a-button
            >
            <a-button type="primary" danger :icon="h(DeleteOutlined)" class="action-button"
              >批量删除</a-button
            >
          </a-space>
        </a-flex>
        <div>
          <a-tooltip title="刷新数据">
            <a-button type="primary" shape="circle" class="refresh-button">
              <ReloadOutlined :spin="spin" />
            </a-button>
          </a-tooltip>
        </div>
      </a-flex>

      <!-- 表格区域 -->
      <a-card class="table-card" :bordered="false">
        <a-table
          :columns="columns"
          :data-source="dataSource"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :pagination="pagination"
          :loading="tableLoading"
          @change="handleTableChange"
          :scroll="{ x: 'max-content' }"
          class="data-table"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'status'">
              <a-tag :color="record.status === 1 ? 'success' : 'error'" class="status-tag">
                {{ record.status === 1 ? '已上架' : '已下架' }}
              </a-tag>
            </template>
            <template v-else-if="column.key === 'action'">
              <!-- 响应式操作按钮 -->
              <div class="action-container">
                <!-- 桌面端显示 -->
                <a-space class="desktop-actions">
                  <a-tooltip title="编辑">
                    <a-button
                      type="link"
                      size="small"
                      @click="handleEdit(record)"
                      class="action-link"
                    >
                      <EditOutlined />编辑
                    </a-button>
                  </a-tooltip>
                  <a-tooltip :title="record.status === 1 ? '下架' : '上架'">
                    <a-button
                      type="link"
                      size="small"
                      :class="record.status === 1 ? 'action-link-danger' : 'action-link-success'"
                      @click="handleStatusChange(record)"
                    >
                      <template v-if="record.status === 1">
                        <VerticalAlignBottomOutlined />下架
                      </template>
                      <template v-else> <VerticalAlignTopOutlined />上架 </template>
                    </a-button>
                  </a-tooltip>
                  <a-popconfirm
                    title="确定要删除此项吗？"
                    ok-text="确定"
                    cancel-text="取消"
                    @confirm="handleDelete(record)"
                  >
                    <a-tooltip title="删除">
                      <a-button type="link" danger size="small" class="action-link">
                        <DeleteOutlined />删除
                      </a-button>
                    </a-tooltip>
                  </a-popconfirm>
                </a-space>

                <!-- 移动端显示下拉菜单 -->
                <div class="mobile-actions">
                  <a-dropdown :trigger="['click']">
                    <a-button size="small">
                      <EllipsisOutlined />
                    </a-button>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item key="edit" @click="handleEdit(record)">
                          <EditOutlined /> 编辑
                        </a-menu-item>
                        <a-menu-item
                          key="status"
                          @click="handleStatusChange(record)"
                          :style="{ color: record.status === 1 ? '#ff4d4f' : '#32cd32' }"
                        >
                          <template v-if="record.status === 1">
                            <VerticalAlignBottomOutlined /> 下架
                          </template>
                          <template v-else> <VerticalAlignTopOutlined /> 上架 </template>
                        </a-menu-item>
                        <a-menu-item key="delete" danger @click="confirmDelete(record)">
                          <DeleteOutlined /> 删除
                        </a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </div>
              </div>
            </template>
          </template>
        </a-table>
      </a-card>
    </a-flex>
  </div>
</template>

<script setup>
import { h, ref, reactive } from 'vue'
import {
  PlusOutlined,
  VerticalAlignTopOutlined,
  VerticalAlignBottomOutlined,
  DeleteOutlined,
  ReloadOutlined,
  SearchOutlined,
  EditOutlined,
  EllipsisOutlined,
} from '@ant-design/icons-vue'
const spin = ref(false)

// 表格相关数据
const tableLoading = ref(false)
const selectedRowKeys = ref([])
const dataSource = ref([
  {
    key: '1',
    name: '测试数据1',
    type: 'A类',
    createTime: '2023-04-01 12:00:00',
    status: 1,
  },
  {
    key: '2',
    name: '测试数据2',
    type: 'B类',
    createTime: '2023-04-02 10:30:00',
    status: 0,
  },
  {
    key: '3',
    name: '测试数据3',
    type: 'A类',
    createTime: '2023-04-03 15:45:00',
    status: 1,
  },
  {
    key: '4',
    name: '测试数据4',
    type: 'C类',
    createTime: '2023-04-04 09:20:00',
    status: 1,
  },
  {
    key: '5',
    name: '测试数据5',
    type: 'B类',
    createTime: '2023-04-05 14:15:00',
    status: 0,
  },
])

const columns = [
  {
    title: 'ID',
    dataIndex: 'key',
    width: 80,
    fixed: 'left',
  },
  {
    title: 'xx名称',
    dataIndex: 'name',
    width: 200,
    ellipsis: true,
  },
  {
    title: 'xx类型',
    dataIndex: 'type',
    width: 150,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 180,
    sorter: true,
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 100,
  },
  {
    title: '操作',
    key: 'action',
    fixed: 'right',
    width: 160,
  },
]

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 100,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total) => `共 ${total} 条`,
})

// 表格相关方法
const onSelectChange = (keys) => {
  selectedRowKeys.value = keys
}

const handleTableChange = (pag, filters, sorter) => {
  console.log('表格变化：', pag, filters, sorter)
  pagination.current = pag.current
  pagination.pageSize = pag.pageSize
  // 这里可以调用加载数据的方法
}

const handleEdit = (record) => {
  console.log('编辑行：', record)
}

const handleStatusChange = (record) => {
  console.log('修改状态：', record)
  // 在实际应用中，这里应该调用API更新状态
  const index = dataSource.value.findIndex((item) => item.key === record.key)
  if (index > -1) {
    dataSource.value[index].status = dataSource.value[index].status === 1 ? 0 : 1
  }
}

const handleDelete = (record) => {
  console.log('删除行：', record)
  // 在实际应用中，这里应该调用API删除数据
  dataSource.value = dataSource.value.filter((item) => item.key !== record.key)
}

const confirmDelete = (record) => {
  // 移动端下拉菜单中的删除操作
  handleDelete(record)
}
</script>

<style lang="scss" scoped>
.admin-manage {
  .header-section {
    margin-bottom: 16px;
  }

  .page-title {
    display: flex;
    flex-direction: column;

    .title-text {
      font-size: 20px;
      font-weight: 600;
      color: #262626;
      line-height: 1.4;
    }

    .title-desc {
      font-size: 14px;
      color: #8c8c8c;
      margin-top: 4px;
    }
  }

  .search-card {
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);

    :deep(.ant-card-head) {
      min-height: 48px;

      .ant-card-head-title {
        padding: 8px 0;
      }
    }
  }

  .search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    padding: 8px 0;

    .action-item {
      margin-right: 0;
    }

    :deep(.ant-form-item) {
      margin-bottom: 0;
    }
  }

  .operation-card {
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);

    :deep(.ant-card-body) {
      padding: 12px 24px;
    }
  }

  .table-card {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);

    :deep(.ant-card-body) {
      padding: 0;
    }
  }

  .action-button {
    border-radius: 4px;
    font-weight: 500;
    height: 32px;
    display: flex;
    align-items: center;
  }

  .search-button {
    background-color: #1890ff;

    &:hover,
    &:focus {
      background-color: #40a9ff;
    }
  }

  .publish-button {
    background: #52c41a;

    &:hover,
    &:focus {
      background: #73d13d;
    }
  }

  .refresh-button {
    transition: all 0.3s;

    &:hover {
      transform: rotate(180deg);
    }
  }

  .ml-2 {
    margin-left: 8px;
  }

  .data-table {
    :deep(.ant-table-thead > tr > th) {
      background-color: #fafafa;
      font-weight: 600;
      padding: 12px 16px;
    }

    :deep(.ant-table-tbody > tr > td) {
      padding: 12px 16px;
    }

    :deep(.ant-table-tbody > tr:hover > td) {
      background-color: #e6f7ff;
    }

    :deep(.ant-table-row) {
      transition: all 0.3s;
    }

    :deep(.ant-pagination) {
      margin: 16px 0;
      padding: 0 16px;
    }
  }

  .status-tag {
    min-width: 60px;
    text-align: center;
    border-radius: 4px;
  }

  .action-link {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
  }

  .action-link-danger {
    color: #ff4d4f;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px;

    &:hover {
      color: #ff7875;
    }
  }

  .action-link-success {
    color: #52c41a;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px;

    &:hover {
      color: #73d13d;
    }
  }

  // 响应式操作按钮样式
  .action-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .mobile-actions {
    display: none;
  }

  @media screen and (max-width: 768px) {
    .desktop-actions {
      display: none;
    }

    .mobile-actions {
      display: block;
    }

    .search-form {
      gap: 8px 16px;
    }
  }

  @media screen and (max-width: 576px) {
    .header-section {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }

    .title-desc {
      display: none;
    }
  }
}
</style>
